<template>
  <div class="treatInfo">
    <div class="header" style="font-size: 18px">
      <div class="line"></div>
      服务详情
      <div class="ellipse">
        <img
          src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1604.png"
          alt=""
        />
        <img
          src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1604.png"
          alt=""
        />
        <div
          class="text"
          v-if="treatInfo.status == 0"
          style="border: 1px solid #28d094; color: #28d094"
        >
          待 审 核
        </div>
        <div
          class="text"
          v-if="treatInfo.status == 1"
          style="border: 1px solid #fddb78; color: #fddb78"
        >
          待 服 务
        </div>
        <div
          class="text"
          v-if="treatInfo.status == 2"
          style="border: 1px solid #3d4cd4; color: #3d4cd4"
        >
          已 完 成
        </div>
        <div
          class="text"
          v-if="treatInfo.status == 3"
          style="border: 1px solid #fa746b; color: #fa746b"
        >
          已 驳 回
        </div>
        <div
          class="text"
          v-if="treatInfo.status == 4"
          style="border: 1px solid #ccc; color: #ccc"
        >
          已 取 消
        </div>
      </div>
    </div>
    <div class="line2"></div>
    <div class="content">
      <el-descriptions title="居民信息" :column="4">
        <el-descriptions-item label="姓名">{{
          treatInfo.resident.name
        }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{
          treatInfo.resident.IDCard
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
          treatInfo.resident.gender === 1 ? "女" : "男"
        }}</el-descriptions-item>
        <el-descriptions-item label="年龄">
          {{
            new Date().getFullYear() -
            Number(treatInfo.resident.birthday.slice(0, 4))
          }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          treatInfo.resident.tel
        }}</el-descriptions-item>
        <el-descriptions-item label="现居地">{{
          treatInfo.resident.address
        }}</el-descriptions-item>
        <el-descriptions-item></el-descriptions-item>
        <el-descriptions-item label="居民标签"
          ><el-tag
            type="info"
            v-for="(item, index) in treatInfo.resident.labelArr"
            :key="index"
            >{{ item.name }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="家庭成员">
          <template style="display: flex; margin-left: 70px; margin-top: -40px">
            <el-card shadow="hover">
              <template style="display: flex; justify-content: space-between">
                <img
                  src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1575.jpg"
                  alt=""
                />
                <div class="info">
                  <p>
                    <span>{{ treatInfo.resident.emergencyContact }}</span>
                  </p>
                  <p>{{ treatInfo.resident.emergencyNumber }}</p>
                </div>
                <img
                  src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1576.png"
                  alt=""
                />
              </template>
            </el-card>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <div class="line2"></div>
      <el-descriptions title="签约信息" :column="4">
        <el-descriptions-item label="服务编号">{{
          treatInfo.number
        }}</el-descriptions-item>
        <el-descriptions-item label="服务状态"
          ><template v-if="treatInfo.status == 0">
            <span style="color: #3dd4a7">待审核</span>
          </template>
          <template v-if="treatInfo.status == 1"
            ><span style="color: #fddb78">待服务</span>
          </template>
          <template v-if="treatInfo.status == 2"
            ><span style="color: #3d4cd4">已完成</span></template
          >
          <template v-if="treatInfo.status == 3"
            ><span style="color: #fa746b">已驳回</span>
          </template>
          <template v-if="treatInfo.status == 4"
            ><span style="color: #fa746b">已取消</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="服务机构">{{
          treatInfo.other.oname
        }}</el-descriptions-item>
        <el-descriptions-item label="服务团队">{{
          treatInfo.other.tname
        }}</el-descriptions-item>
        <el-descriptions-item label="服务医生">{{
          treatInfo.other.dname
        }}</el-descriptions-item>
        <el-descriptions-item label="服务包">{{
          treatInfo.other.sname
        }}</el-descriptions-item>
        <el-descriptions-item label="服务项目"
          >{{ treatInfo.other.siname }}（剩余{{
            treatInfo.other.totalCount - treatInfo.other.count
          }}次）
        </el-descriptions-item>
        <el-descriptions-item label="服务来源">{{
          treatInfo.resident.origin
        }}</el-descriptions-item>
        <el-descriptions-item label="服务地点">
          <template v-if="treatInfo.address == 0">
            <span>签约人家中</span>
          </template>
          <template v-else>
            <span>机构门诊</span>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="预约时间">{{
          treatInfo.appointmentTime
        }}</el-descriptions-item>
        <el-descriptions-item label="提交时间">{{
          treatInfo.submissionTime
        }}</el-descriptions-item>
        <el-descriptions-item>{{}}</el-descriptions-item>
        <template v-if="treatInfo.status != 0 && treatInfo.status != 3">
          <el-descriptions-item label="审计时间">{{
            treatInfo.auditTime
          }}</el-descriptions-item>
          <el-descriptions-item label="审计人">{{
            treatInfo.checker
          }}</el-descriptions-item>
        </template>
        <template v-if="treatInfo.status == 4">
          <el-descriptions-item label="取消时间">
            2020/10/09 10:09:09
          </el-descriptions-item>
          <el-descriptions-item label="取消原因"
            >设备维修，本周暂停服务</el-descriptions-item
          >
        </template>
        <template v-if="treatInfo.status == 2">
          <el-descriptions-item label="完成时间">
            {{ treatInfo.finishTime }}
          </el-descriptions-item>
        </template>
        <el-descriptions-item label="服务备注">{{
          treatInfo.notes
        }}</el-descriptions-item>
        <template v-if="treatInfo.status == 3">
          <el-descriptions-item label="驳回原因"
            >日程冲突，请重新服务选择时间</el-descriptions-item
          >
        </template>
      </el-descriptions>
      <div class="line2" v-if="treatInfo.status == 2"></div>
      <el-descriptions
        title="健康随访信息"
        :column="4"
        v-if="treatInfo.status == 2"
      >
        <el-descriptions-item label="血压"
          >{{ HealthFollowUpInfo.bP_diastolic }}/{{
            HealthFollowUpInfo.bP_systolic
          }}mmHg</el-descriptions-item
        >
        <el-descriptions-item label="空腹血糖"
          >{{ HealthFollowUpInfo.bloodSugar }}mmol/L</el-descriptions-item
        >
        <el-descriptions-item label="心率"
          >{{ HealthFollowUpInfo.heartRate }}bmp/L</el-descriptions-item
        >
        <el-descriptions-item></el-descriptions-item>
        <el-descriptions-item label="病情描述">{{
          HealthFollowUpInfo.description
        }}</el-descriptions-item>
        <el-descriptions-item></el-descriptions-item>
        <el-descriptions-item></el-descriptions-item>
        <el-descriptions-item></el-descriptions-item>
        <el-descriptions-item label="健康指导">{{
          HealthFollowUpInfo.guidance
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="line2"></div>
      <template v-if="treatInfo.status == 0 || treatInfo.status == 1">
        <el-button type="primary" size="large" @click="modify"
          >编辑服务信息</el-button
        >
        <template v-if="treatInfo.status == 0">
          <el-button type="success" size="large" @click="pass"
            >审核通过</el-button
          >
          <el-button type="danger" size="large" @click="BH">驳回</el-button>
        </template>
        <template v-if="treatInfo.status == 1">
          <el-button type="success" size="large" @click="finish"
            >完成服务</el-button
          >
          <el-button type="danger" size="large" @click="QXYY"
            >取消预约</el-button
          >
        </template>
      </template>
      <el-button size="large" @click="Return">返回</el-button>
    </div>
  </div>
  <!-- //健康随访表单 -->
  <el-dialog
    v-model="dialogFormVisible"
    title="填写健康随访信息"
    width="450"
    draggable
    v-if="treatInfo.status == 1"
  >
    <el-form
      ref="ruleFormRef"
      label-width="80px"
      size="large"
      status-icon
      :model="HealthFollowUpInfo"
      :rules="rules"
    >
      <el-form-item label="心率" prop="heartRate">
        <el-input
          style="width: 200px; height: 40px"
          type="number"
          v-model="HealthFollowUpInfo.heartRate"
        />
        <span
          style="width: 80px; text-align: center; font-size: 13px; color: #999"
          >bmp</span
        >
      </el-form-item>
      <el-form-item label="舒张压" prop="bP_diastolic">
        <el-input
          style="width: 200px; height: 40px"
          type="number"
          v-model="HealthFollowUpInfo.bP_diastolic"
        />
        <span
          style="width: 80px; text-align: center; font-size: 13px; color: #999"
          >mmHg</span
        >
      </el-form-item>
      <el-form-item label="收缩压" prop="bP_systolic">
        <el-input
          style="width: 200px; height: 40px"
          type="number"
          v-model="HealthFollowUpInfo.bP_systolic"
        />
        <span
          style="width: 80px; text-align: center; font-size: 13px; color: #999"
          >mmHg</span
        >
      </el-form-item>
      <el-form-item label="空腹血糖" prop="bloodSugar">
        <el-input
          style="width: 200px; height: 40px"
          v-model="HealthFollowUpInfo.bloodSugar"
        />
        <span
          style="width: 80px; text-align: center; font-size: 13px; color: #999"
          >mmol</span
        >
      </el-form-item>

      <el-form-item label="病情描述" prop="description">
        <el-input
          style="width: 333px; height: 100px"
          type="textarea"
          v-model="HealthFollowUpInfo.description"
        />
      </el-form-item>
      <el-form-item label="健康指导" prop="guidance">
        <el-input
          style="width: 333px; height: 100px"
          type="textarea"
          v-model="HealthFollowUpInfo.guidance"
        />
      </el-form-item>
      <el-button @click="dialogFormVisible = false">返回</el-button>
      <el-button type="primary" @click="play(ruleFormRef)"> 提交 </el-button>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import api from "@/api";
import { useRoute, useRouter } from "vue-router";
import { type FormInstance, type FormRules, ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
//健康随访遮罩
const dialogFormVisible = ref(false);
//当前信息
const treatInfo = ref({
  id: "4oa98bc0-ee1b-11ed-8459-c76f227ca924",
  number: "20235121912233",
  residentId: "be642f70-efd6-11ed-835e-65d5662cddew",
  organId: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  teamId: "88579930-ee50-11ed-8059-0ba99686cabb",
  doctorId: "67e98bc0-ee1b-11ed-8459-c76f227ca999",
  serviceId: "8000e240-828b-11ed-a736-b1a95d18c711",
  serviceItemId: "d49f9cb0-5c07-11ed-9450-8f19ea84b625",
  address: 1,
  appointmentTime: "2023-03-02 15:00:00",
  notes: "无",
  submissionTime: "2023-03-09 10:14:11",
  status: 0,
  score: 5,
  flag: 0,
  auditTime: null,
  checkerId: null,
  finishTime: null,
  checker: "段宏",
  resident: {
    id: "be642f70-efd6-11ed-835e-65d5662cddew",
    number: "20215132258654",
    userId: "67e98bc0-ee1b-11ed-8459-c76f227cade2",
    name: "刘泽军",
    picture: "public/upload/7abee44758ef44082ff53c87f4703657.jpg",
    IDCard: "513777188109182111",
    tel: "17799992111",
    address: "陕西西安",
    district: "陕西西安",
    gender: 0,
    birthday: "1881-09-18",
    residenceId: "800868d0-b40e-11ed-a611-3bf04a4b0d9f",
    nativePlace: "陕西西安",
    residenceAddress: "陕西西安",
    nationId: "613c4ad0-dcc6-11ed-b712-5ffe7a78b424",
    educationId: "e4034120-46ef-11ed-bbf8-c15b55eb9015",
    maritalStatusId: "c78a2a20-b41f-11ed-a611-3bf04a4b0d91",
    career: "略",
    workUnit: "略",
    emergencyContact: "无",
    emergencyNumber: "无",
    expenseTypeId: "004505b0-b420-11ed-a611-3bf04a4b0d93",
    designatedMedicalUnits: "略",
    origin: "用户注册",
    status: 0,
    flag: 0,
    createTime: "2023-01-16 11:18:11",
    auditTime: null,
    labelArr: [{ name: "错误" }],
  },
  other: {
    oname: "成都市武侯区望江路社区卫生服务中心",
    tname: "段宏团队",
    dname: "陈晓平",
    sname: "老人服务包",
    siname: "血常规检查",
    totalCount: 2,
    count: 1,
  },
});
//健康随访信息
const HealthFollowUpInfo = ref({
  serviceDetailId: "",
  bP_diastolic: "",
  bP_systolic: "",
  bloodSugar: "",
  heartRate: "",
  description: "",
  guidance: "",
});
//表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  bP_diastolic: [{ required: true, message: "请输入收缩压", trigger: "blur" }],
  bP_systolic: [{ required: true, message: "请输入舒张压", trigger: "blur" }],
  bloodSugar: [{ required: true, message: "请输入血糖", trigger: "blur" }],
  heartRate: [{ required: true, message: "请输入心率", trigger: "blur" }],
});
//完成健康随访表单
const play = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      await api.serve.addHealthFollowUp(HealthFollowUpInfo.value);
    }
  });
  let result = await api.serve.updateStatusByServiceDetailId({
    status: 2,
    id: treatInfo.value.id,
    checkerId: null,
  });
  if (result.data.code == 200) {
    ElMessage.success("审核通过");
  } else {
    ElMessage.warning("未知错误");
  }
  router.push("/home/serve/treat");
};
//完成服务
const finish = () => {
  dialogFormVisible.value = true;
};
//审核通过
const pass = async () => {
  let result = await api.serve.updateStatusByServiceDetailId({
    status: 1,
    id: treatInfo.value.id,
    checkerId: localStorage.getItem("user_id"),
  });
  if (result.data.code == 200) {
    ElMessage.success("审核通过");
  } else {
    ElMessage.warning("未知错误");
  }
  router.push("/home/serve/treat");
};
//取消预约
const QXYY = async () => {
  let result = await api.serve.updateStatusByServiceDetailId({
    status: 4,
    id: treatInfo.value.id,
    checkerId: null,
  });
  if (result.data.code == 200) {
    ElMessage.success("取消成功");
  } else {
    ElMessage.warning("未知错误");
  }
  router.push("/home/serve/treat");
};
//驳回
const BH = async () => {
  let result = await api.serve.updateStatusByServiceDetailId({
    status: 3,
    id: treatInfo.value.id,
    checkerId: null,
  });
  if (result.data.code == 200) {
    ElMessage.success("驳回通过");
  } else {
    ElMessage.warning("未知错误");
  }
  router.push("/home/serve/treat");
};
//返回
const Return = () => {
  if (treatInfo.value.status != 2 && treatInfo.value.status != 4) {
    router.push("/home/serve/treat");
  } else {
    router.push("/home/serve/Recording");
  }
};
//查询健康随访
const getHealthFollowUpInfo = async (id: string) => {
  let result = await api.serve.getHealthFollowUp(id);
  HealthFollowUpInfo.value = result.data.data[0];
};
//编辑签约信息
const modify = () => {
  router.push({
    path: "/home/serve/treatModify",
    query: { id: route.query.id },
  });
};
//后台获取信息
const getTreatInfo = async () => {
  let result = await api.serve.getServiceDetail(route.query.id as string);
  console.log(result.data.data);
  treatInfo.value = result.data.data;
  HealthFollowUpInfo.value.serviceDetailId = treatInfo.value.serviceItemId;
  if (treatInfo.value.status == 2) {
    getHealthFollowUpInfo(treatInfo.value.serviceItemId);
  }
};

getTreatInfo();
</script>
<style lang="scss">
.treatInfo {
  width: 1150px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  .header {
    @include flex(none, center, none);

    .line {
      width: 6px;
      height: 20px;
      background-color: skyblue;
      border-radius: 5px;
      margin-right: 10px;
    }

    .ellipse {
      margin-left: 30px;
      position: relative;
      top: -10px;
      img {
        position: absolute;
      }
      img:last-of-type {
        width: 39px;
        height: 39px;
        top: 9px;
        left: 9px;
      }
      .text {
        z-index: 100;
        font-size: 13px;
        width: 64px;
        height: 24px;
        transform: rotate(330deg);
        position: absolute;
        left: -4px;
        top: 16px;
        line-height: 24px;
        text-align: center;
        background-color: white;
        font-weight: bold;
      }
    }
  }
  .line2 {
    width: 100%;
    border-bottom: 1px solid #eee;
    margin: 20px 0;
  }
  .content {
    .el-descriptions {
      .el-descriptions__body {
        display: flex;
        height: 240px;
      }
      .el-tag {
        height: 32px;
        margin: 0 5px;
      }
      .el-card {
        width: 200px;
        height: 84px;
        box-sizing: border-box;
        margin: 10px;
        color: #999999;
        .info {
          font-size: 12px;
          span {
            font-size: 15px;
            color: rgba(0, 0, 0, 0.829);
            margin-right: 10px;
          }
        }

        img {
          width: 40px;
          height: 40px;
        }
        img:last-of-type {
          width: 10px;
          height: 15px;
          transform: rotate(330deg);
        }
      }
      .el-descriptions__content {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.89);
      }
      .el-descriptions__label {
        color: #999999;
        font-size: 13px;
        width: 60px;
        text-align: right;
        display: inline-block;
      }
    }
  }
}
.el-dialog {
  .el-form-item__label {
    font-size: 13px;
    color: #999999;
  }
  .el-textarea__inner {
    height: 100px;
  }
  .el-button:first-of-type {
    margin-left: 250px;
  }
}
</style>
